<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新路线</h2>

    <el-steps :active="step" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写路线基本信息" />
      <el-step title="编辑路线详情" />
      <el-step title="发布路线" />
    </el-steps>

    <!-- 第一步开始 -->
    <el-form label-width="120px" v-show="step==1">
      <el-form-item label="路线标题">
        <el-input v-model="route.title" placeholder=" 示例：日本经典之旅" />
      </el-form-item>

      <!-- 所属分类 -->
      <el-form-item label="目的地分类">
        <el-select v-model="route.destParentId" placeholder="地区" @change="regionChanged">
          <el-option
            v-for="region in regionList"
            :key="region.id"
            :label="region.title"
            :value="region.id"
          />
        </el-select>

        <!-- 二级分类 -->
        <el-select v-model="route.destId" placeholder="国家">
          <el-option
            v-for="nation in nationList"
            :key="nation.id"
            :label="nation.title"
            :value="nation.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="天数">
        <el-input-number
          :min="1"
          v-model="route.day"
          controls-position="right"
          placeholder="请填写路线的天数"
        />
      </el-form-item>

      <el-form-item label="主题">
        <el-input v-model="route.theme" placeholder=" 示例：赏樱" />
      </el-form-item>

      <!-- 路线封面 -->
      <el-form-item label="封面">
        <single-upload v-model="route.cover"></single-upload>
      </el-form-item>

      <el-form-item label="价格">
        <el-input-number
          :min="0"
          v-model="route.price"
          controls-position="right"
          placeholder="请设置路线的价格"
        />元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next1()">保存并下一步</el-button>
      </el-form-item>
    </el-form>
    <!-- 第一步结束 -->

    <!-- 第二步开始 -->
    <el-form :model="description" label-width="120px" v-show="step==2">
      <!--文本编辑器-->
      <el-form-item label="路线详情" prop="description">
        <mavon-editor v-model="description.description" />
      </el-form-item>
      <el-form-item>
        <el-button @click="step=1">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next2()">保存下一步</el-button>
      </el-form-item>
    </el-form>
    <!-- 第二步结束 -->

    <!-- 第三步开始 -->
    <el-form label-width="120px" v-show="step==3">
      <el-form-item label="预览">
        <div class="ccInfo">
          <img :src="route.cover" />
          <div class="main">
            <h2>{{ route.title }}</h2>
            <p class="gray">
              <span>共{{ route.day }}天数</span>
            </p>
            <p>
              <span>目的地：{{ nation.title }}</span>
            </p>
            <h2 class="red">￥{{ route.price }}起</h2>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="step=2">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="publish()">发布课程</el-button>
      </el-form-item>
    </el-form>
    <!-- 第三步结束 -->

    <!-- 第四步开始 -->
    <el-form label-width="120px" v-show="step==4">
      <el-col>
        <el-card class="box-card" style="width:80%;margin:20px auto">
          <h1>保存成功</h1>
          <el-button type="primary" @click="addAgian">继续添加</el-button>
          <router-link :to="{name:'route-route'}">
            <el-button v-if="isAuth('sys:role:save')" type="primary">路线列表</el-button>
          </router-link>
        </el-card>
      </el-col>
    </el-form>

    <!-- 第四步结束 -->
  </div>
</template>

<script>
import singleUpload from "@/components/upload/singleUpload";
export default {
  //声明组件
  components: { singleUpload },
  data() {
    return {
      description: {
        id: "",
        description: "",
      },
      step: 1,
      saveBtnDisabled: false,
      route: {
        id: "",
        title: "",
        destId: "", //二级分类id
        destParentId: "", //一级分类id
        day: 0,
        theme: "",
        cover: "",
        price: 0,
        status: 0,
      },
      regionList: [], //一级分类
      nationList: [], //二级分类
      nation: {}
    };
  },
  created() {
    this.initRoute();
    this.getRegionList();
  },
  watch: {
    $route(to, from) {
      //路由变化时，方法就会执行
      console.log("监听到路由变化");
      this.initRoute();
      console.log("初始化完毕");
      this.step = 1
    },
  },
  methods: {
    //===============================================发布成功=======================================================
    addAgian() {
      this.step = 1;
      this.resetSpuData();
    },
    resetSpuData() {
      this.route = {
        id: "",
        title: "",
        destId: "",
        destParentId: "",
        day: 0,
        theme: "",
        cover: "",
        price: 0,
        status: 0,
      };
      this.description = {
        id: "",
        content: "",
      };
    },
    //===============================================最终发布=======================================================
    //发布路线
    publish() {
      this.route.status = 1;
      this.editeRoute();
      this.step = 4;
      this.initRoute();
    },
    //===============================================路线简介=======================================================
    //添加简介
    addDescription() {
      this.description.id = this.route.id;
      this.$http({
        url: this.$http.adornUrl("/route/description/addDescription"),
        method: "post",
        data: this.$http.adornData(this.description, false),
      }).then(({ data }) => {
        //提示信息
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.step = 3;
      });
    },
    //修改简介
    editDescription() {
      this.$http({
        url: this.$http.adornUrl("/route/description/updateDescription"),
        method: "post",
        data: this.$http.adornData(this.description, false),
      }).then(({ data }) => {
        //提示信息
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.step = 3;
      });
    },
    //下一步进入发布路线步骤
    next2() {
      if (this.description.id == null || this.description.id == "") {
        //添加
        //this.getDestInfo();
        this.addDescription();
      } else {
        //this.getDestInfo();
        this.editDescription();
      }
    },
    // //根据目的地id获取到目的地信息
    // getDestInfo() {
    //   this.$http({
    //     url: this.$http.adornUrl(
    //       `/route/category/getCategoryById/${this.route.destId}`
    //     ),
    //     method: "get",
    //     params: this.$http.adornParams({}),
    //   }).then(({ data }) => {
    //     console.log(data.data.category);
    //     this.nation = data.data.category;
    //   });
    // },
    //===============================================路线基本信息====================================================

    //获取路线简介信息
    getDescription() {
      this.$http({
        url: this.$http.adornUrl(`/route/description/getDescriptionById/${this.description.id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        console.log("获取到路线简介",data.data)
        this.description = data.data.description
      });
    },
    //获取路线信息
    getRouteInfo() {
      this.$http({
        url: this.$http.adornUrl(`/route/route/getRouteById/${this.route.id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        console.log("获取路线基本信息", data.data.route);
        this.route = data.data.route;
      });
    },

    //初始化路线
    initRoute() {
      console.log("传过来的id", this.$route.params.id);
      if (this.$route.params && this.$route.params.id) {
        console.log("有id回显数据");
        this.route.id = this.$route.params.id;
        this.description.id = this.$route.params.id;
        this.getRouteInfo();
        this.getDescription()
      } else {
        this.route = {};
        this.description = {};
      }
    },

    //点击某个一级分类，触发change，显示对应二级分类
    regionChanged(value) {
      //value就是一级分类id值
      //遍历所有的分类，包含一级和二级
      for (var i = 0; i < this.regionList.length; i++) {
        //每个一级分类
        var region = this.regionList[i];
        //判断：所有一级分类id 和 点击一级分类id是否一样
        if (value === region.id) {
          //从一级分类获取里面所有的二级分类
          this.nationList = region.children;
          //把二级分类id值清空
          this.route.destId = "";
        }
      }
    },

    //添加路线基本信息
    addRoute() {
      this.$http({
        url: this.$http.adornUrl("/route/route/addRoute"),
        method: "post",
        data: this.$http.adornData(this.route, false),
      }).then(({ data }) => {
        //提示信息
        this.$message({
          type: "success",
          message: "保存成功",
        });
        //console.log(data.data)
        this.route.id = data.data.id;
        console.log(this.route);
      });
    },
    //修改路线基本信息
    editeRoute() {
      //console.log(this.route);
      this.$http({
        url: this.$http.adornUrl("/route/route/updateRoute"),
        method: "post",
        data: this.$http.adornData(this.route, false),
      }).then(({ data }) => {
        //提示信息
        this.$message({
          type: "success",
          message: "修改成功",
        });
      });
    },

    //获取一级分类
    getRegionList() {
      this.$http({
        url: this.$http.adornUrl("/route/category/list/tree"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        console.log("获取到的一级分类", data);
        this.regionList = data.data.list;
      });
    },

    //保存并下一步，这里分离两个方法再调用即可
    next1() {
      if (this.route.id == null || this.route.id == "") {
        this.addRoute();
        this.step = 2;
      } else {
        this.editeRoute();
        this.step = 2;
      }
    },
  },
};
</script>

<style scoped>
.ccInfo {
  background: #f5f5f5;
  padding: 20px;
  overflow: hidden;
  border: 1px dashed #ddd;
  margin-bottom: 40px;
  position: relative;
}
.ccInfo img {
  background: #d6d6d6;
  width: 500px;
  height: 278px;
  display: block;
  float: left;
  border: none;
}
.ccInfo .main {
  margin-left: 520px;
}

.ccInfo .main h2 {
  font-size: 28px;
  margin-bottom: 30px;
  line-height: 1;
  font-weight: normal;
}
.ccInfo .main p {
  margin-bottom: 10px;
  word-wrap: break-word;
  line-height: 24px;
  max-height: 48px;
  overflow: hidden;
}

.ccInfo .main p {
  margin-bottom: 10px;
  word-wrap: break-word;
  line-height: 24px;
  max-height: 48px;
  overflow: hidden;
}
.ccInfo .main h3 {
  left: 540px;
  bottom: 20px;
  line-height: 1;
  font-size: 28px;
  color: #d32f24;
  font-weight: normal;
  position: absolute;
}
</style>